.container {
    max-width: $container;
    margin-left: auto;
    margin-right: auto;
    padding-left: $gutter;
    padding-right: $gutter;

    @media screen and (min-width: $tablet) {
      padding-left: $gutter-larger;
      padding-right: $gutter-larger;
    }
  }

  .container--full {
    margin-left: auto;
    margin-right: auto;
    padding-left: $gutter;
    padding-right: $gutter;

    @media screen and (min-width: $tablet) {
      padding-left: $gutter-larger;
      padding-right: $gutter-larger;
    }
  }

  .flex-grid {
    display: block;
    margin-left: -$gutter / 2;
    margin-right: -$gutter / 2;

    @media (min-width: $tablet) {
      @include flexbox();
      margin-left: -$gutter-larger / 2;
      margin-right: -$gutter-larger / 2;
    }

    &.grid--center {
      @include align-items(center);
    }

    &.grid--justify-around {
      @include justify-content(space-around);
    }

    &.grid--justify-end {
      @include justify-content(flex-end);
    }

    &.grid--reverse {
      @media screen and (min-width: $tablet) {
        @include flex-direction(row-reverse);
      }
    }

    &.grid--wrap {
      @include flex-wrap(wrap);
    }

    @mixin column {
      padding-left: $gutter / 2;
      padding-right: $gutter / 2;
      margin-bottom: $gutter;
      width: 100%;

      @media (min-width: $tablet) {
        @include flex(1);
        margin-bottom: $gutter-larger;
        padding-left: $gutter-larger / 2;
        padding-right: $gutter-larger / 2;
      }

      &.no-gutter {
        margin-bottom: 0;
      }

      &.mini-gutter {
        @media (min-width: $tablet) {
          @include flex(1);
          margin-bottom: $gutter;
          padding-left: $gutter / 2;
          padding-right: $gutter / 2;
        }
      }
    }

    > .col--free {
      @include column;

      @media (min-width: $tablet) {
        flex: 0;
      }
    }

    > .col {
      @include column;
    }

    > .col--haft {
      @include column;

      @media (min-width: $tablet) {
        max-width: 50%;
        @include flex-basis(50%);
      }
    }

    > .col--third {
      @include column;

      @media (min-width: $tablet) {
        max-width: 33%;
        @include flex-basis(33%);
      }
    }

    > .col--fourth {
      @include column;

      @media (min-width: $tablet) {
        max-width: 25%;
        @include flex-basis(25%);
      }
    }

    > .col--fifth {
      @include column;

      @media (min-width: $tablet) {
        max-width: 20%;
        @include flex-basis(20%);
      }
    }

    > .col--three-quarter {
      @include column;

      @media (min-width: $tablet) {
        max-width: 75%;
        @include flex-basis(75%);
      }
    }
  }

  .flex-grid--nobreak {
    @include flexbox();
    margin-left: -$gutter / 2;
    margin-right: -$gutter / 2;

    @media (min-width: $tablet) {
      margin-left: -$gutter-larger / 2;
      margin-right: -$gutter-larger / 2;
    }

    @mixin column {
      @include flex(1);
      padding-left: $gutter / 2;
      padding-right: $gutter / 2;
      margin-bottom: $gutter;
      width: 100%;

      @media (min-width: $tablet) {
        margin-bottom: $gutter-larger;
        padding-left: $gutter-larger / 2;
        padding-right: $gutter-larger / 2;
      }

      &.mini-gutter {
        @media (min-width: $tablet) {
          @include flex(1);
          margin-bottom: $gutter;
          padding-left: $gutter / 2;
          padding-right: $gutter / 2;
        }
      }

      &.no-gutter {
        margin-bottom: 0;
      }
    }

    > .col--free {
      @include column;

      flex: 0;
    }

    > .col {
      @include column;
    }

    > .col--haft {
      @include column;
      max-width: 50%;
      @include flex-basis(50%);
    }

    > .col--third {
      @include column;
      max-width: 33%;
      @include flex-basis(33%);
    }

    > .col--fourth {
      @include column;
      max-width: 25%;
      @include flex-basis(25%);
    }

    > .col--fifth {
      @include column;

      max-width: 20%;
      @include flex-basis(20%);
    }
  }
